<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style>
			.zp {
				width: 300px;
				height: 300px;
			}
			.zp img {
				display: block;
				width: 100%;
				height: 100%;
			}
			.tag {
				position: relative;
				width: 10px;
				height: 10px;
				margin-left: 145px;
				background-color: red;
			}
			button {
				padding: 10px 20px;
				margin: 10px;
			}			
		</style>
	</head>

	<body>
		<div class="zp">
			<img src="img/zp.png" />
		</div>
		<div class="tag"></div>
		<div class="btns">
			<button onclick="start()">start</button>
			<button onclick="stop()">stop</button>
		</div>
	</body>

	<script>
		
		function easeIn(t, b, c, d) {
			return c * (t /= d) * t + b;
		}
		function easeOut(t, b, c, d) {
			return -c * (t /= d) * (t - 2) + b;
		}
		
		var zp = document.querySelector(".zp");
		
		function setDeg(deg){
			zp.style.transform = "rotate("+deg+"deg)";
			zp.style.webkitTransform = "rotate("+deg+"deg)";
		}
		
		var t = 0, b = 0, c = 500, d = 150;	
		
		var deg = 0;
		var last = easeIn(d, b, c, d) - easeIn(d-1, b, c, d);
		var STA = 0;
		
		function start(){
			if (STA != 0) {
				return;
			}
			STA = 1;
			var seti = setInterval(function(){
				switch (STA){
					case 1:
						stab = 1;
						t++;
						deg = easeIn(t, b, c, d);
						if(t > d) {
							STA = 2;
						}
						break;
					case 2:
						deg += last;
						break;
					case 3:
						t = 0,
						b = 0,
						c = 500,
						d = 150 * 1.2;
						STA = 4
						break;
					case 4:
						t++;
						var tempdeg = easeOut(t, b, c, d) - easeOut(t+1, b, c, d);
						deg -= tempdeg;
						if(t > d) {
							clearInterval(seti);
							setTimeout(function(){
								deg = 0, STA = 0, 
								t = 0, b = 0, c = 500,d = 150;
							}, 100);
						}
						break;
				}
				
				setDeg(deg);
			}, 10);
		}
		
		function stop(){
			if (STA == 2) {
				STA = 3;
			}
		}
		
	</script>

</html>